<!--
 * @LastEditTime : 2022-10-31 17:46:23
 * @FilePath     : /pyy/src/views/physics/add/components/detailed.vue
 * @Description  : 物理分析 > 新增物理分析 > 明细表
-->

<template>
  <div class="detailed">
    <div class="header">检测信息{{ index + 1 }}</div>
    <div class="contanier">
      <van-field
        autosize
        rows="1"
        type="textarea"
        name="sampleName"
        class="mandatory"
        label="试样名称"
        placeholder="请填写"
        :rules="[{ required: true, message: '不能为空' }]"
        autocomplete="off"
        v-model="form.sampleName"
      />
      <van-field
        name="sampleCode"
        label="客户试样编号"
        placeholder="请填写"
        v-model="form.sampleCode"
      />
      <van-field
        autosize
        rows="1"
        type="textarea"
        name="sampleState"
        label="试样状态"
        placeholder="请填写"
        autocomplete="off"
        v-model="form.sampleState"
      />
      <van-field
        name="specification"
        label="试样规格"
        placeholder="请填写"
        autocomplete="off"
        v-model="form.specification"
      />
      <van-field
        name="amount"
        type="number"
        class="mandatory"
        label="数量"
        :rules="[{ required: true, message: '不能为空' }]"
        placeholder="请填写数字"
        autocomplete="off"
        :formatter="(value) => Number(value) || null"
        v-model="form.amount"
      />
      <!-- <van-field
        readonly
        autosize
        rows="1"
        type="textarea"
        name="detectionBig"
        label="检测项目大类"
        label-width="max-content"
        placeholder=""
        autocomplete="off"
        v-model="form.detectionBig"
      /> -->
      <van-field
        readonly
        is-link
        autosize
        rows="1"
        type="textarea"
        arrow-direction="down"
        name="detectionSmall"
        label="检测项目小类"
        label-width="max-content"
        placeholder="请填写"
        autocomplete="off"
        :value="form.detectionSmall"
        @click="showDetection"
      />
<!--      <van-field
        readonly
        type="number"
        name="cost"
        label="费用"
        placeholder="请填写数字"
        autocomplete="off"
        :value="form.cost || null"
      />-->
      <van-field
        autosize
        rows="1"
        type="textarea"
        name="remark"
        label="备注"
        label-width="max-content"
        placeholder="请填写"
        autocomplete="off"
        v-model="form.remark"
      />
    </div>
    <div class="footer addCopy">
      <van-button
        class="btn-delete"
        inline-block
        type="default"
        icon="delete-o"       
        @click="handleDelete"
      >
        删除
      </van-button>
      <van-button
        inline-block
          type="default"
          class="btn-add-detailed"
          icon="description"
          native-type="button"
          @click="handleAddCopy"
        >
          复制
        </van-button>
    </div>

    <detailed-project
      ref="detailedProject"
      :organization-id="organizationId"
      @confirm="handleConfirm"
    />
  </div>
</template>

<script>
import DetailedProject from "./detailed_project.vue";

export default {
  name: "Detailed",
  components: {
    DetailedProject,
  },
  props: {
    // 第几组
    index: {
      type: Number,
      require: true,
      default: 0,
    },
    // 是否显示 删除按钮
    showDelete: {
      type: Boolean,
      require: true,
      default: false,
    },
    // 检查机构 id
    organizationId: { type: String, require: true },
    // 表单录入数据
    form: {
      require: true,
      type: Object,
      default: () => ({
        sampleName: "",
        sampleCode: "",
        sampleState: "",
        specification: "",
        amount: null,
        detectionBig: "",
        detectionSmall: "",
        cost: null,
        remark: "",
      }),
    },
  },
  data() {
    return {
      selectProject: {},
      allPrice:null
    };
  },
  mounted() {

  },
  watch:{
    "form.amount":{
      handler(newV){
        this.form.cost = this.allPrice * newV
      },
      deep:true
    }
  },
  methods: {

    /**
     * 显示 检查项目
     */
    showDetection() {
      this.$refs.detailedProject.show();
    },

    /**
     * 检测项目 点击确定
     * @param {Array<string>} selectProject: 已选中检测项目
     * @param {number} allPrice: 已选中检测项目小类总价格
     */
    handleConfirm(selectProject, allPrice) {
      // 获取 已选中检测项目大类
      const category = Object.keys(selectProject);
      // 获取 已选中检测项目小类
      const projects = Object.values(selectProject).flat(Infinity);

      this.form.detectionBig = category.join(",");
      this.form.detectionSmall = projects
        .map((item) => item.split(">>").at(0))
        .filter((item) => item)
        .join(",");
      this.allPrice = allPrice ;
      this.form.cost = allPrice *  this.form.amount
    },

    /**
     * 点击 删除
     */
    handleDelete() {
      this.$emit("delete", this.index);
    },
    /**
     * 点击 复制当前
     */
     handleAddCopy() {
      this.$emit("copy", this.index);
    },
  },
};
</script>

<style lang="less" scoped>
.detailed {
  width: 100%;
  height: max-content;
  font-family: "Inter";
  font-style: normal;
  font-size: 16px;
  line-height: 19px;
  margin-top: 8px;
  background: #ffffff;
  box-sizing: border-box;
  padding: 0 12px;
  .mandatory{
            position: relative;
            &::after{
                content: '*';
                display: block;
                position: absolute;
                left: 5px;
                top: 14px;
                font-size: 16px;
                color: red;
                transform: scale(1);

            }
        }
  .header {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    padding: 12px 4px;
    border-bottom: 1px solid #e8e8e8;
  }
  .addCopy{
  display: flex;
    justify-content: space-evenly;
    background-color: #fff;
}
  .footer {
    .btn-delete {
      color: #ee0a24;
      border: none;
    }
  }
}
</style>
